<template>
  <div class="pickTime">
    <van-popup
      get-container="body"
      @click-overlay="clickOverlay"
      v-model="myShow"
      duration="0.2"
      round
      position="bottom"
      :style="{ height: '300px', backgroundColor: '#f2f2f2' }"
    >
      <div class="popSlot">
        <van-cell
          title="Pick-up Time"
          :icon="btn_close_normal"
          @click="clickOverlay"
        />

        <van-button
          v-if="load"
          size="mini"
          class="loading"
          loading
          type="info"
          loading-text="加载中..."
        />

        <van-tree-select
          height="200px"
          v-if="!load"
          :items="items"
          :active-id.sync="activeIds"
          :main-active-index.sync="activeIndex"
          @click-nav="getDay"
          @click-item="getTime"
        />
      </div>
      <div
        v-if="!load"
        class="timeSure"
      >
        <van-button
          @click="confirm"
          type="primary"
          size="large"
        >confirm</van-button>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { Toast } from 'vant'
export default {
  name: 'pickTimePop',
  props: {
    show: {
      // 通过props传递给子组件的show，不能在子组件内部修改props中的show值。
      type: Boolean,
      default: false
    }
  },
  watch: {
    show: {
      handler(newValue, oldValue) {
        // console.log(newValue)
        if (newValue) {
          this.myShow = true
          setTimeout(() => {
            this.load = false
          }, 3000)
        } else {
          this.myShow = false
          setTimeout(() => {
            this.load = true
          }, 1000)
        }
      },
      deep: true
    }
  },
  mounted() {
    // this.day = this.items[0].text
  },
  methods: {
    getTimeData(JsonArr) {
      // console.log('1', JSON.parse(JsonArr))
      // {
      //   text: '昨天',
      //   children: [
      //     {
      //       text: '8：30- 12：30',
      //       // id，作为匹配选中状态的标识符
      //       id: 1
      //     },
      //     {
      //       text: '2：30 - 6：30',
      //       // id，作为匹配选中状态的标识符
      //       id: 2
      //     }
      //   ]
      // },
      // valueEn: "Today|||Within 4 hours ,,,222,,,,22"
      let arr = JSON.parse(JsonArr)
      let newArr = []
      for (let i = 0; i < arr.length; i++) {
        let text = arr[i].valueEn.split('|||')[0]
        let child = []
        let childItem = arr[i].valueEn.split('|||')[1].split(',,,')
        for (let n = 0; n < childItem.length; n++) {
          let text = childItem[n]
          let id = n + 1
          child.push({ text, id })
        }
        newArr.push({
          text,
          children: child
        })
      }
      this.items = newArr
      this.day = this.items[0].text
      // console.log(newArr)
    },
    clickOverlay() {
      //   this.show = false
      //   https://blog.csdn.net/github_35549695/article/details/82770044
      //this.show = false;  //这行去掉 不能直接改变props中参数的值
      this.$emit('closePop')
    },
    getDay(data) {
      //   alert(this.items[data].text)
      this.day = this.items[this.activeIndex].text
      this.pickUpTime = this.day + '' + this.time
    },
    getTime(time) {
      //   alert(time)
      // console.log(this.day + time.text)
      this.time = time.text
      this.pickUpTime = this.day + '          ' + time.text
      //   this.$emit('getPickUpTime', this.day + '          ' + time.text)
    },
    confirm() {
      if (this.time == '' || this.day == '') {
        this.pickUpTime = ''
        this.$emit('getPickUpTime', this.pickUpTime)
      } else {
        this.pickUpTime = this.day + '  ' + this.time
        this.$emit('getPickUpTime', this.pickUpTime)
      }

      // console.log(this.pickUpTime)
    }
  },
  data() {
    return {
      load: true,
      myShow: false,
      btn_close_normal: require('../../assets/image/btn_close_normal.png'),
      activeIds: 0,
      activeIndex: 0, //左侧高亮索引
      items: [
        // {
        //   text: '昨天',
        //   children: [
        //     {
        //       text: '8：30- 12：30',
        //       // id，作为匹配选中状态的标识符
        //       id: 1
        //     },
        //     {
        //       text: '2：30 - 6：30',
        //       // id，作为匹配选中状态的标识符
        //       id: 2
        //     }
        //   ]
        // },
        // {
        //   text: '今天',
        //   children: [
        //     {
        //       text: '8：30- 12：30',
        //       // id，作为匹配选中状态的标识符
        //       id: 1
        //     },
        //     {
        //       text: '2：30 - 6：30',
        //       // id，作为匹配选中状态的标识符
        //       id: 2
        //     }
        //   ]
        // }
      ],
      day: '',
      time: '',
      pickUpTime: ''
    }
  }
}
</script>
<style lang="scss" scoped>
.popSlot {
  width: 100%;
  .van-cell {
    border-bottom: 1px solid #eeeeee;
    position: relative;
    /deep/ i {
      position: absolute;
      right: 14px;
    }
    /deep/ .van-cell__title {
      span {
        font-weight: 700;
      }
    }
  }
  /deep/ .van-cell::after {
    border-bottom: none;
  }
  /deep/ .loading {
    background-color: $main-color;
    position: absolute;
    bottom: 130px;
    left: 50%;
    transform: translateX(-50%);
  }
  /deep/ .van-sidebar-item--select::before {
    height: 100%;
    background-color: $main-color;
  }
  /deep/ .van-tree-select__item--active {
    color: $main-color;
  }
}
.timeSure {
  box-sizing: border-box;
  padding-left: $padd;
  padding-right: $padd;
  width: 100%;
  //   height: 40px;
  margin-top: 8px;
  /deep/ .van-button--large {
    background-color: $main-color;
    border: none;
    height: 40px;
  }
}
</style>
